今天我們邀請到 Vue 來幫自己自我介紹
官方文件：Vue (發音為 /vjuː/，類似 view) 是一款用於構建用戶界面的 JavaScript 框架。它基於標準 HTML、CSS 和 JavaScript 構建，並提供了一套聲明式的、組件化的編程模型，幫助你高效地開發用戶界面。無論是簡單還是複雜的界面，Vue 都可以勝任。
插播一下！今天 Chris 走過來跟我說！欸你知道嗎？ "Vue" 其實是法語（哪尼，我真的不知道），後來在Vue 原來是法語？ Vue 的超簡短歷史介紹中，看到作者 尤雨溪 當初在幫它想名字的時候的由來，大家可以這裡看一下～
好，回到這個法國小子的自介⋯⋯什麼是聲明式、組件化？
維基百科：Declarative programming is a non-imperative style of programming in which programs describe their desired results without explicitly listing commands or steps that must be performed.
這種方式讓我們不需要關心「它是如何運作的」，而只需告訴系統「我們想要什麼」。
在 Vue 中，我們只需定義要呈現的資料和樣式，Vue 會自動處理更新視圖的過程，而不需要手動操作 DOM。
範例：
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
Count is: {{ count }} 就是一個聲明式渲染的範例～
當按鈕被點擊時，count 的值會遞增，而 {{ count }} 會顯示變數 count 目前的值，且 UI 會自動更新顯示最新的 count 值，這就是聲明式渲染的效果：UI 內容隨著數據變化自動更新。
（{{ }} 是 Vue 的模板語法，後面會更詳細介紹）
Vue 採用這個方式，讓我們專注於資料和界面的呈現，不需要特別關注背後底層運作的邏輯，透過直觀的語法，可以更輕鬆地構建響應式應用。
昨天我們有稍微講到：在 Vue 裡，我們可以將功能都拆分成各個獨立的組件，而這些組件各自擁有<template>、<script>、<style> 的結構。
官方文件：Vue 的單文件組件 (即 *.vue 文件，英文 Single-File Component，簡稱 SFC) 是一種特殊的文件格式，使我們能夠將一個 Vue 組件的模板、邏輯與樣式封裝在單個文件中。
這些單個 SFC 會交由 @vue/compiler-sfc 編譯成 JavaScript 和 CSS，而編譯後的每個 SFC 都會成為 ES module，所以我們也可以在一開始就用 import 的方式引入它們，例如 import { ref } from 'vue'; 。
Vue 的組件可以按兩種不同的風格書寫：選項式 API 和組合式 API。
我們用計數器範例來了解一下這兩種風格的寫法～
<template>
<div>
<p>當前計數：{{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
export default {
// 定義響應式數據
data() {
return {
count: 0
};
},
// 定義方法
methods: {
increment() {
this.count += 1;
}
}
};
</script>
<template>
<div>
<p>當前計數：{{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
// 使用 setup 來組織邏輯
setup() {
// 使用 ref 創建響應式數據
const count = ref(0);
// 定義增加計數的函數
const increment = () => {
count.value += 1;
};
// 返回需要在模板中使用的變數和函數
return {
count,
increment,
};
}
};
</script>
以這個例子來說，兩者的 <template> 區塊是一樣的，但在 <script> 定義部分有些不同：
data() 來定義響應式methods 來定義方法script setup() 來組織邏輯ref() 創建響應式變數Vue 3 推薦使用 Composition API，因為可以更好地處理大型應用的邏輯拆分和代碼可維護性。
Composition API 其實有 <script> + setup() 和 <script setup> 語法糖 兩種寫法喔！
使用 語法糖 的寫法會是：
<script setup>
import { ref } from "vue";
// 使用 ref 創建響應式數據
const count = ref(0);
// 定義增加計數的函數
const increment = () => {
count.value += 1;
};
</script>
和上述範例的 <script> + setup() 之間的差別為：不需要 return，因為 <script setup> 會自動將定義的東西暴露給模板。
想要深入研究的搭家，推薦學姐 安揪拉 的這篇文章！（小菜菜正研究中⋯⋯請等等我）
即使看得出兩者差別，目前還是沒有太大的感覺耶⋯⋯不過好像大概知道 Vue 它有什麼最主要的特性和能耐了⋯⋯繼續繼續，明天我們可以來試著把它在本地 run 起來 
『這種方式讓我們不需要關心「它是如何運作的」，而只需告訴系統「我們想要什麼」。』
這句話看起來格外親切呢！
iThome鐵人賽
看影片追技術